import React from 'react';
import { Form, Input, Button, List } from 'antd';
 
const NestedFormList = () => {
  const nestedFormItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 10 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 14 },
    },
  };
 
  return (
    <Form {...nestedFormItemLayout}>
      <Form.List name="outerList">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item
                {...(index === 0 && { key: field.key })}
                name={`outerList[${index}].innerList`}
                fieldKey={field.key}
              >
                <Form.List name={`outerList[${index}].innerList`}>
                  {(innerFields, { add: addInner, remove: removeInner }) => (
                    <div>
                      {innerFields.map((innerField, innerIndex) => (
                        <Form.Item
                          {...nestedFormItemLayout}
                          name={`outerList[${index}].innerList[${innerIndex}]`}
                          fieldKey={innerField.key}
                        >
                          <Input placeholder="Inner Input" />
                        </Form.Item>
                      ))}
                      <Button
                        type="dashed"
                        onClick={() => addInner()}
                        block
                        icon={<PlusOutlined />}
                      >
                        Add inner item
                      </Button>
                      {innerFields.length > 0 && (
                        <Button
                          type="dashed"
                          onClick={() => removeInner(innerFields.length - 1)}
                          block
                          icon={<MinusOutlined />}
                        >
                          Remove inner item
                        </Button>
                      )}
                    </div>
                  )}
                </Form.List>
              </Form.Item>
            ))}
            <Button
              type="dashed"
              onClick={() => add()}
              block
              icon={<PlusOutlined />}
            >
              Add outer item
            </Button>
            {fields.length > 0 && (
              <Button
                type="dashed"
                onClick={() => remove(fields.length - 1)}
                block
                icon={<MinusOutlined />}
              >
                Remove outer item
              </Button>
            )}
          </>
        )}
      </Form.List>
    </Form>
  );
};
 
export default NestedFormList;